<template>
  <div>
    <!-- 添加用工人员 -->
    <el-dialog
      v-model="virtualAccountVisible"
      title="详情"
      width="70%"
      center
    >
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in pay_channel"
          :label="item.label"
          :name="item.label"
        >
          <el-table
            :data="virtualAccountList"
            v-loading="loading"
            border
          >
            <el-table-column
              prop="sydName"
              label="服务商"
              align="center"
            />
            <el-table-column
              prop="bankVirtualCard"
              label="银行虚拟户"
              align="center"
            />
            <el-table-column
              prop="name"
              label="虚拟户名"
              align="center"
            />
            <el-table-column
              label="操作"
              align="center"
            >
              <template #default="scope">
                <el-tag v-if="!scope.row.bankVirtualCard" @click="createSubmit(scope.row)">{{scope.row.btnLoading==1?'创建':'加载中...'}}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script setup name="VirtualAccount" lang="ts">
import apiEnterprise from '@/api/enterprise/addEnterprise';
import { EnterpriseVO, MerchantAccountCreateXnForm, MerchantAccountCreateXnVO } from '@/api/enterprise/addEnterprise/types';
import apiOperator from '@/api/operator/addOperator';
import { OperatorQuery, OperatorVO } from '@/api/operator/addOperator/types';
import { TabsPaneContext } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pay_channel } = toRefs<any>(proxy?.useDict('pay_channel'));

const activeName = ref<any>();
const virtualAccountList = ref<MerchantAccountCreateXnVO[]>();
const virtualAccountVisible = ref(false);
const loading = ref(false);
const virtualAccountType = ref<string>('');
const propsData = ref<object>({});

const virtualAccountVisibleFun = async (type: string, row: any) => {
  virtualAccountVisible.value = true;
  virtualAccountType.value = type;
  propsData.value = row;
  console.log(type);
  activeName.value = pay_channel.value[0].label;
  virtualAccountListFun(virtualAccountType.value, propsData.value);
};
const virtualAccountListFun = async (type: string, row: any) => {
  let res: any = '';
  loading.value = true;
  if (virtualAccountType.value == 'enterprise') {
    res = await apiEnterprise
      .merchantAccountListFp({
        bankType: activeName.value,
        merId: row.id
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (virtualAccountType.value == 'operator') {
    res = await apiOperator
      .operatorAccountListFp({
        bankType: activeName.value,
        opId: row.id
      })
      .finally(() => {
        loading.value = false;
      });
  }
  virtualAccountList.value = res.data;
  virtualAccountList.value?.forEach((e) => {
    e.btnLoading = 1;
  });
};

const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.props.name;
  virtualAccountListFun(virtualAccountType.value, propsData.value);
  console.log(tab.props.name, activeName.value);
};

const createSubmit = async (row: any) => {
  let res: any = '';
  row.btnLoading = 2;
  if (virtualAccountType.value == 'enterprise') {
    res = await apiEnterprise
      .merchantAccountCreateXn({
        bankType: activeName.value,
        merId: row.merId,
        sydId: row.sydId,
        merName: row.merName
      })
      .finally(() => {
        row.btnLoading = 1;
      });
  } else if (virtualAccountType.value == 'operator') {
    res = await apiOperator
      .operatorAccountCreateXn({
        bankType: activeName.value,
        opId: row.opId,
        sydId: row.sydId,
        opName: row.opName
      })
      .finally(() => {
        row.btnLoading = 1;
      });
  }
  virtualAccountListFun(virtualAccountType.value, propsData.value);
};
defineExpose({
  virtualAccountVisibleFun
});
</script>

<style lang="scss" scoped>
</style>
